<template>
  <div
    style="
      min-height: 80vh;
      background: #fff;
      text-align: center;
      box-shadow: 0 0 5px 2px #fff;
    "
    class="animated fadeInLeft"
  >
    <div
      class="user-info"
      :class="{ info: userHeight !== 'false' ? false : true }"
    >
      <el-row justify="space-between" style="height: 70px">
        <el-col>
          <div class="avatar">
            <div>
              <el-avatar :size="60" :src="userInfo.avatar" />
            </div>
            <div style="text-align: left; margin-left: 10px">
              <div style="display: flex; align-items: center">
                {{ userInfo.nickname }}
                <div v-if="userInfo.level === 0" class="user-normal">
                  未激活
                </div>
                <div v-else class="user-vip">会员</div>
              </div>
              <div class="fcolor">账号：{{ userInfo.username }}</div>
              <div class="fcolor">余额：{{ userInfo.balance }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row
        justify="start"
        style="flex: 1"
        v-if="userHeight !== 'false' ? false : true"
      >
        <el-col>
          <div class="card">
            <div class="card-item">
              <div v-if="userInfo.level === 0">成为会员，拥有专属VIP权益</div>
              <div v-else>已成为会员，拥有专属VIP权益</div>
              <div>
                <button @click="toVip">
                  {{ userInfo.level === 0 ? "立即开通" : "会员续费" }}
                </button>
              </div>
            </div>
            <div>
              <img
                src="@/assets/icon/vip.png"
                mode="scaleToFill"
                style="width: 40px; height: 40px"
              />
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row v-else style="flex: 1; justify-content: center">
        <div class="card1">
          <div class="card-item">
            <div v-if="userInfo.level === 0">成为会员，拥有专属VIP权益</div>
            <div v-else>已成为会员，拥有专属VIP权益</div>
            <div>
              <button @click="toVip">
                {{ userInfo.level === 0 ? "立即开通" : "会员续费" }}
              </button>
            </div>
          </div>
          <div>
            <img
              src="@/assets/icon/vip.png"
              mode="scaleToFill"
              style="width: 40px; height: 40px"
            />
          </div>
        </div>
      </el-row>
    </div>
    <div class="user-oper" v-if="userHeight !== 'false' ? true : false">
      <div v-for="item of operList" :key="item.id">
        <router-link :to="item.path" class="item" v-if="item.show">
          <div>
            <img :src="item.icon" style="width: 40px; height: 40px" />
          </div>
          <div>{{ item.title }}</div>
        </router-link>
      </div>
    </div>
    <div v-else class="mobile-oper">
      <router-link v-for="item of operList" :key="item.id" :to="item.path">
        <div class="mobile-item" v-if="item.show">
          <div>{{ item.title }}</div>
          <div>
            <el-icon color="#a1a1a1"><ArrowRightBold /></el-icon>
          </div>
        </div>
      </router-link>
    </div>
  </div>
  <vip-dialog ref="vipRef" :dataList="vipShopList" ></vip-dialog>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { ArrowRightBold } from "@element-plus/icons-vue";
import vipDialog from "@/components/user/vip-dialog.vue";
import request from "@/assets/js/request";
import { ElMessage } from "element-plus";

const userHeight = localStorage.getItem("mobile");
const vipRef = ref();
const vipShopList = reactive([]);

const userInfo = ref({});

const toVip = () => {
  vipRef.value.open(userInfo.value?.level || 0);
};

const operList = ref([
  {
    id: 1,
    title: "充值记录",
    icon: require("@/assets/icon/dingdan-order1.png"),
    path: "/client/history/recharge",
    show: true,
  },
  {
    id: 2,
    title: "金币充值",
    icon: require("@/assets/icon/qianbao-wallet.png"),
    path: "/client/buy/gold",
    show: true,
  },
  {
    id: 3,
    title: "购买记录",
    icon: require("@/assets/icon/bug_history.png"),
    path: "/client/history/buy",
    show: true,
  },
  {
    id: 4,
    title: "观看记录",
    icon: require("@/assets/icon/jilu-record.png"),
    path: "/client/history/video",
    show: true,
  },
  {
    id: 5,
    title: "设置",
    icon: require("@/assets/icon/shezhi-setup.png"),
    path: "/client/setting",
    show: true,
  },
  {
    id: 6,
    title: "发布",
    icon: require("@/assets/icon/publish.png"),
    path: "/client/video/publish",
    show: false,
  },
]);

const getVipShopLIst = () => {
  request
    .get("/client/shop/vip/list")
    .then((res) => {
      vipShopList.push(...res.data);
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

const getUserInfo = () => {
  request
    .get("/client/user/current")
    .then((res) => {
      userInfo.value = res.data;
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};


onMounted(() => {
  getVipShopLIst();
  getUserInfo();
});
</script>

<style scoped lang="scss">
@function randomColor() {
  $r: random(256);
  $g: random(256);
  $b: random(256);
  @return rgb($r, $g, $b);
}

@mixin tag($back, $font) {
  background: $back;
  color: $font;
  margin-left: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 5px;
}

.user-info {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-image: linear-gradient(135deg, #d6f6ff, #81d3ff 100%);
  padding: 10px;
  height: 300px;
  display: flex;
  flex-direction: column;
  position: relative;
  .avatar {
    display: flex;
    justify-content: start;
  }
}

.user-oper {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #fff;
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
  text-align: center;
  grid-gap: 20px;
  position: relative;
  padding: 10px;
  .item {
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    border-radius: 5px;
    &:hover {
      box-shadow: 0 0 5px 2px #8b8b8b;
      cursor: pointer;
    }
  }
}

.card1 {
  width: 400px;
  position: absolute;
  bottom: -10px;
  height: 80px;
  background-image: linear-gradient(#e6b980, #eacda3 100%);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  border-top-left-radius: 10px;
  align-items: center;
  border-top-right-radius: 10px;
}
.card {
  background-image: linear-gradient(#e6b980, #eacda3 100%);
  padding: 10px;
  display: flex;
  left: -10px;
  width: 100%;
  bottom: -10px;
  position: absolute;
  justify-content: space-between;
  border-top-left-radius: 10px;
  align-items: center;
  border-top-right-radius: 10px;
}

.user-normal {
  @include tag(#9e9e9e, #cccccc);
}

.user-vip {
  @include tag(#ecc179, #6d3c02);
}

.card-item {
  text-align: left;
  & > div:nth-child(1) {
    margin-bottom: 8px;
    color: #613701;
  }
  & > div:nth-child(2) {
    & > button {
      background: #c16430;
      color: #fff;
      font-weight: 600;
      border: none;
      border-radius: 20px;
      padding: 3px 15px;
      &:hover {
        cursor: pointer;
        background: #ca7300;
      }
    }
  }
}
.info {
  height: 150px;
}

.mobile-oper {
  margin-top: 30px;
  padding: 0 10px;
  & > div {
    height: 30px;
  }
  .mobile-item {
    display: flex;
    height: 50px;
    border-bottom: 1px #f1f1f1 solid;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    &:hover {
      background: #f8f8f8;
      cursor: pointer;
    }
    &::before {
      content: "";
      border-left: 3px randomColor() solid;
      position: absolute;
      width: 3px;
      height: 20px;
      left: 8px;
    }
  }
}
</style>
